﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css" />
		<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>

		<style>
			.el-table .warning-row {
				background: oldlace;
			}

			.el-table .success-row {
				background: #f0f9eb;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div>
				<h1 align="center">我的商品</h1>
				<el-row>
					<el-col :span="20" :offset="3">
						<div>
							<template >
								<el-table
										:data="productVo"
										style="width: 100%"
										:row-class-name="tableRowClassName">
									<el-table-column label="编号" width="150">
										<template slot-scope="scope">
											<span style="margin-left: 10px">{{scope.$index + 1}}</span>
										</template>
									</el-table-column>
									<el-table-column
											prop="product.name"
											label="商品名称"
											width="150">
									</el-table-column>
									<el-table-column
											prop="typeName"
											label="商品类型"
											width="150">
									</el-table-column>
									<el-table-column
											prop="product.detail"
											label="商品详情"
											width="300">
									</el-table-column>
									<el-table-column
											prop="stateName"
											label="状态"
											width="150">
									</el-table-column>
									<el-table-column label="操作" width="150">
										<template slot-scope="scope">
											<el-button v-if="scope.row.product.state == 0" @click="update(scope.row)" type="danger" slot="reference" class="el-icon-edit-outline" circle>修改</el-button>
										</template>
									</el-table-column>
								</el-table>
							</template>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					productVo:[]
					//
				},
				methods: {
					tableRowClassName({row, rowIndex}) {
						if (rowIndex%4 === 1) {
							return 'warning-row';
						} else if (rowIndex%4 === 3) {
							return 'success-row';
						}
						return '';
					},
					initProduct(){
						$.get("/product/selectProductByState",function (data){
							app.productVo=data;
						})
					},
					update(val){
						// localStorage.setItem("product",JSON.stringify(val.product))
						// location.href="/updateInfo"
						$.post("/product/modify",val.product,function (data){
							localStorage.setItem("product",JSON.stringify(val.product))
							localStorage.setItem("document",JSON.stringify(data));
							location.href="/updateInfo"
						})
					}
					//
				},
				created(){
					this.initProduct();
				}
			});
		</script>
	</body>
</html>